<%@ page import="myexchange.Game"%>

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="layout" content="main" />
<g:set var="entityName"
	value="${message(code: 'game.label', default: 'Game')}" />
<g:javascript library="jquery" />
<title><g:message code="default.list.label" args="[entityName]" /></title>
</head>
<body>
    <div class="navbar navbar-inverse navbar-fixed-top">
      <div class="navbar-inner">
        <div class="container">
          <a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </a>
          <a class="brand" href="#">Game xChange</a>
          <div class="nav-collapse collapse">
            <ul class="nav">
              <li class="active"><a href="#">Home</a></li>
              <li><a href="#" onclick="connect()">connect</a></li>
              <li><a href="#" onclick="disconnect()">disconnect</a></li>
              <li><g:remoteLink action="endTurnAll" controller="turn">End Turn</g:remoteLink> </li>
            </ul>
            <ul class="nav pull-right">
              <li><g:link controller="user" action="logout">logout</g:link></li>
			</ul>
          </div><!--/.nav-collapse -->
        </div>
      </div>
    </div>

    <div class="container">

      <!-- Example row of columns -->
      <div class="row">
        <div class="span4">
       		<div class="well well-small">
       		<div class="well-header">Exchange board</div>
	        	<div id="exchangePanel">
				</div>
				<g:remoteLink id="reloadExchangePanel" action="reloadExchangePanel" controller="game" update="exchangePanel" class="autoclick" style="display:none">reload</g:remoteLink>
			</div>
			<div class="well well-small">
				<div id="playerInfo">
				</div>
				<g:remoteLink id="reloadPlayerInfo" action="reloadPlayerInfo" controller="game" update="playerInfo" class="autoclick" style="display:none">reload</g:remoteLink>
			</div>
        </div>
        <div class="span4">
        	<div class="well well-small">
				<div id="turnStatus"></div>
				<g:remoteLink id="reloadTurnStatusPanel" action="reloadTurnStatusPanel" controller="game" update="turnStatus" class="autoclick" style="display:none">reload</g:remoteLink>
			</div>
			<div class="well well-small">
				<div class="well-header">Actions</div>
				<div id="actionPanel"></div>
				<g:remoteLink id="loadActionPanel" action="loadActionPanel" controller="game" update="actionPanel" class="autoclick" style="display:none">reload</g:remoteLink>
			</div>
		</div>
		<div class="span4">
			<div class="well well-small">
				<div class="well-header">History</div>
				<div id="history">	</div>
				<g:remoteLink id="reloadHistory" action="reloadHistory" controller="game" update="history" class="autoclick" style="display:none">reload</g:remoteLink>
			</div>
			<div class="well well-small">
				<div class="well-header">Card's history</div>
		      	<div id="cardHistoryPanel">
		     </div>
			<g:remoteLink id="reloadCardHistory" action="reloadCardHistory" controller="game" update="cardHistoryPanel" class="autoclick" style="display:none">reload</g:remoteLink>
		</div>
		</div>
      </div>
      <hr>
    </div>

</body>
</html>
